<template>
  <PracticeSearch @searchPractice="onSearch"/>
  <a-spin :spinning="loading">
    <a-spin :spinning="loading">
      <template v-if="items?.length > 0">
        <div class="parent">
          <div class="child" v-for="(item,index) in items" :key="index">
            <PracticeCard :item="item" />
          </div>
        </div>
      </template>
      <EmptyData v-else />
    </a-spin>
  </a-spin>
</template>
<script lang="ts" setup>
import { PropType, ref } from "vue";
import EmptyData from "@/components/public/EmptyData.vue";
import PracticeCard from "@/components/practice/PracticeCard.vue";
import PracticeSearch from "@/components/practice/PracticeSearch.vue";

const emit = defineEmits(["searchPractice"]);

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  items: {
    type: Array as PropType<Array<any>>,
    default: () => ([])
  }
});

function onSearch(val) {
  emit("searchPractice", val);
}
</script>
<style lang="less" scoped>
.parent {
  width: 100%;
  /*弹性布局*/
  display: flex;
  flex-flow: row wrap;
  /*可理解以盒子的左上角开始布局元素*/
  align-content: flex-start;
  gap: 12px;
}

.child {
  /*固定盒子大小防止变形*/
  box-sizing: border-box;
  flex: 0 0 32.6%;
  margin-bottom: 5px;
}

.flex {
  display: flex;
}

</style>
